<template>
  <div class="wel-container">
    <!-- 某台主机详细信息 -->
    <!-- etailed information -->
    <div style="width:900px; float: right">
      <etailed-host></etailed-host>
    </div>

    <!-- 主机详细信息表格 -->
    <div class="service-host-table" style="margin-right:910px;">
      <el-table :data="serviceHostTable" style="width: 100%;">
        <el-table-column prop="type" label="类型"></el-table-column>
        <el-table-column prop="total" label="总的"></el-table-column>
        <el-table-column prop="used" label="已使用"></el-table-column>
        <el-table-column prop="unused" label="未使用"></el-table-column>
      </el-table>

      <!-- 下拉菜单 -->
      <el-select class="host-seclect" v-model="selectHostValue" placeholder="请选择" style="margin-top: 15px;">
        <el-option
          v-for="item in selectHost"
          :key="item.value"
          :label="item.label"
          :value="item.value"
        ></el-option>
      </el-select>
    </div>
  </div>
</template>

<script>
import EtailedHost from "./EtailedHost.vue";
export default {
  name: "wel",
  components: {
    "etailed-host": EtailedHost
  },
  data() {
    return {
      serviceHostInfo: {
        serverNum: 20
      }, // 用来存放
      serviceHostTable: [
        {
          type: "主机",
          total: 0,
          used: 0,
          unused: 0
        },
        {
          type: "硬盘",
          total: 0,
          used: 0,
          unused: 0
        },
        {
          type: "内存",
          total: 0,
          used: 0,
          unused: 0
        }
      ],
      selectHost: [
        {
          value: "主机1",
          label: "主机1"
        },
        {
          value: "主机2",
          label: "主机2"
        },
        {
          value: "主机3",
          label: "主机3"
        },
        {
          value: "主机4",
          label: "主机4"
        }
      ],
      selectHostValue: "主机1"
    };
  },
  computed: {},
  created() {
    this.getServiceHostInfo();
  },
  mounted() {},
  methods: {
    getServiceHostInfo() {
      axios
        .get("static/josnDataTest/service-host.json")
        .then(response => {
          // 注意：执行读取文件是异步操作，
          // 有可能数据还没有读取出来， vue就已经挂载完了
          if (response.status === 200) {
            // this.serviceHostInfo = response.data;
            // this.serviceHostTable[0].total = 45;
            setServiceHostTable(response.data);
            console.log(response.data);
          } else {
            console.log("请求数据失败");
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    setServiceHostTable(obj) {
      this.serviceHostTable[0].total = obj.serverNum;
      this.serviceHostTable[0].used = obj.serverNormalNum;
      this.serviceHostTable[0].unused = obj.serverAbnormalNum;

      this.serviceHostTable[1].total = obj.diskTotal;
      this.serviceHostTable[1].used = obj.diskUsed;
      this.serviceHostTable[1].unused = obj.diskUnused;

      this.serviceHostTable[2].total = obj.memoryTotal;
      this.serviceHostTable[2].used = obj.memoryUsed;
      this.serviceHostTable[2].unused = obj.memoryUnused;
    }
  }
};
</script>

<style lang="scss">
$bgc: #1a1d36;
.wel-container {
  // margin-left: 200px;
  border-left: 200px solid #555;
  height: 100%;
  background-color: $bgc;

  .el-table {
    // 去掉整个表格最右边的的小横线
    background-color: rgba(0, 0, 0, 0);
  }
  .el-table::before {
    // 去掉整个表格最底部的的小横线
    background-color: rgba(0, 0, 0, 0);
  }
  .el-table thead {
    color: #9953d7;
  }
  .el-table tbody {
    color: #3abff4fa;
  }
  .el-table tbody tr.hover,
  .el-table tbody tr:hover {
    background-color: #dfd8ec40;
  }
  .el-table th,
  .el-table tr {
    background-color: $bgc;
  }
  .el-table td,
  .el-table th.is-leaf {
    border-bottom: 1px solid #293758;
  }
  .host-seclect input{
    background-color: $bgc;
    color: lime;
  }
}
.el-select-dropdown__wrap{
  background: $bgc;
}
.el-select-dropdown__item.hover, .el-select-dropdown__item:hover {
    background-color: #e2e3e91c;
}
</style>
